<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>
          <h2>审批休假</h2>
        </span>
      </div>

      <div class="button-container" style ="display: flex;">
        <el-button type="primary" :icon="Select" :disabled="tableChecked.length === 0"
          @click="approveRequests()">批量同意申请</el-button>
        <el-button type="danger" :icon="SemiSelect" :disabled="tableChecked.length === 0"
          @click="rejectRequests()">批量驳回申请</el-button>
      </div>


    </template>
    <el-table :data="vocations" @selection-change="handleSelectionChange"
      style="width: 100%; border: 1px solid #dcdcdc;">
      <el-table-column type="selection" width="55" />

      <el-table-column label="申请人" prop="empName" width="150px"></el-table-column>
      <el-table-column label="假期类型" prop="vocationTypeName"></el-table-column>
      <el-table-column label="时长" prop="days"> </el-table-column>s
      <el-table-column label="开始时间" prop="startTime"></el-table-column>
      <el-table-column label="结束时间" prop="endTime"></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button :icon="Select" circle plain type="primary" @click="approveRequest(row)"></el-button>
          <el-button :icon="SemiSelect" circle plain type="danger" @click="rejectRequest(row)"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
      layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
      @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />

  </el-card>

</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useEmpStore } from '../store/emp'
import { storeToRefs } from 'pinia'
import { getDeptVocations, updateVocationStatus } from '../api'
import type { PiVocations, Vocation } from '../model'
import { ElMessage, ElMessageBox, linkEmits } from 'element-plus'
import { Select, SemiSelect, Delete } from '@element-plus/icons-vue'


const store = useEmpStore()
const { empInfo } = storeToRefs(store)

let pageNum = ref(1)
let pageSize = ref(10)
let piVocation = ref<PiVocations>({
  ids: [],
  status: 0,
})
let vocations = ref<Vocation[]>([])

let total = ref(0)
let param = ref({
  offset: 0,
  limit: 10,
  empId: empInfo.value!.id,

})

const showVocations = async () => {
  getDeptVocations(param.value).then(res => {
    vocations.value = res.t.vocations
    total.value = res.t.total
  })
}
showVocations();

let ids = ref<number[]>([])
// 批量选中的数据
const tableChecked = ref([])

// 获取选中的值
const handleSelectionChange = (val: never[]) => {
  //console.log("handleSelectionChange--", val)
  tableChecked.value = val
}

const approveRequests = () => {
  piVocation.value.status = 2;

  doVocations()
}
const rejectRequests = () => {
  piVocation.value.status = 3;

  doVocations()
}

// 根据id批量操作
const doVocations = () => {
  ElMessageBox.confirm(
    '你确认操作选中的休假申请吗？',
    '温馨提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      try {
        piVocation.value.ids = tableChecked.value.map(row => row.id);
        let result = await updateVocationStatus(piVocation.value);
        ElMessage.success('操作成功');
        showVocations();
      } catch (error) {
        console.error('操作失败:', error);
        ElMessage.error('操作失败');
      }
    })
    .catch(() => {
      ElMessage.info('取消操作');
    });
}



//当每页条数发生了变化，调用此函数
const onSizeChange = (size: number) => {
  param.value.limit = size
  showVocations();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num: number) => {
  param.value.offset = (num - 1) * param.value.limit,
    showVocations();
}

const approveRequest = (row: Vocation) => {
  piVocation.value.ids = [row.id];
  piVocation.value.status = 2;
  updateVocationStatus(piVocation.value).then(() => {
    showVocations()
  })
  ElMessage({
    message: '审批成功！',
    type: 'success',
  })

}
const rejectRequest = (row: Vocation) => {
  piVocation.value.ids = [row.id];
  piVocation.value.status = 3;
  updateVocationStatus(piVocation.value).then(() => {
    showVocations()
  })
  ElMessage.error('驳回成功！');
}
</script>
<style scoped></style>
